<template>
  <view class="flex flex-col items-center pt-25">
    <image class="w-227 h-227" src="/static/images/empty/img_empty.png" />
    <view class="mt-6 mb-3 text-28 c-#666">您已提交申请，正在审核中~</view>
    <view class="mb-5 text-28 c-#666">绑定“拓普旺跨境服务”公众号接收消息更及时哦</view>
    <view class="w-full">
      <view class="mx-4 py-2 bg-#F4AF22 rounded flex justify-center items-center text-28 c-#fff" @click="state.showBindModal = true">绑定公众号</view>
    </view>
    <!-- 绑定公众号弹窗 -->
    <u-modal v-model="state.showBindModal" :show-title="false" border-radius="12" :show-confirm-button="false">
      <view class="slot-content">
        <view @click="state.showBindModal = false"
          class="absolute top-0 right-17 w-166 h-166 flex justify-end">
          <image class="mt-3 mr-2 w-22 h-22" src="/static/images/home/ic_delete.png" />
        </view>
        <image @click="previewImage(['/package_society/static/images/img_wx_qr.png'], 0)" class="w-432 h-432 mb-2" src="/package_society/static/images/img_wx_qr.png"></image>
        <view class="c-#333 text-sm text-center">点击二维码查看大图，长按图片选择“拓普旺跨境服务”公众号，点击关注公众号即可完成绑定~</view>
      </view>
    </u-modal>
  </view>
</template>
<script setup>
import { previewImage } from '@/common/util/uni'

const state = reactive({
  showBindModal: false
})
</script>
<style scoped>
.slot-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx;
}
</style>